<template>
  <div class="home">
    <!-- 首页搜索框开始 -->
    <div class="search-header" :class="{on:activeHeader}">
      <div class="location">东莞</div>
      <div class="search" @click.stop="goToSearch">
        <span class="icon-search"></span>
        <input type="text" placeholder="找电影、影院" />
      </div>
      <div class="date">
        <div class="calendar">
          <span class="day">03</span>
        </div>
      </div>
    </div>
    <!-- 首页搜索框结束 -->
    <mt-swipe class="swiper-container">
      <mt-swipe-item>
        <img @click.stop="goTo(1)" src="./images/swiper/1.jpg" alt="" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img @click.stop="goTo(2)" src="./images/swiper/2.jpg" alt="" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img @click.stop="goTo(3)" src="./images/swiper/3.jpg" alt="" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img @click.stop="goTo(4)" src="./images/swiper/4.jpg" alt="" />
      </mt-swipe-item>
    </mt-swipe>
    <!-- 动态class,两种写法 -->
    <!-- 对象的写法 -->
    <!-- red 类名，key值 -->
    <!-- <div :class="{red:bool}">区域，动态class</div> -->
    <!-- 数组写法 -->
    <!-- <div :class="[{red:bool},'big']">区域，动态class</div>
    <button @click="bool=!bool">点击切换样式</button> -->
    <!-- 首页电影列表开始 -->
    <div class="main">
      <!-- 热映列表开始 -->
      <div class="panel">
        <!-- 标题开始 -->
        <div class="header">
          <span class="red-name">正在热映</span>
          <span class="more" @click="goToHotMovie">
            全部{{ hotMovies.length }}部
            <span class="icon-more"></span>
          </span>
        </div>
        <!-- 标题结束 -->
        <!-- 电影列表开始 -->
        <div class="body">
          <div
            class="item"
            v-for="item in hotMovies.slice(0, 6)"
            :key="item.movie_id"
          >
            <img
              :src="item.poster"
              alt=""
              @click.stop="
                $router.push({
                  path: 'movie_detail',
                  query: { movie_id: item.movie_id },
                })
              "
            />
            <div style="position: relative;">
              <div class="describe">
                <span class="name ellipsis">{{ item.name }}</span>
                <span class="score" v-if="!!item.score">
                  <i class="integer"
                    >{{ item.score && item.score.toFixed(1).split('.')[0] }}.</i
                  >
                  <i class="fraction">{{
                    item.score && item.score.toFixed(1).split('.')[1]
                  }}</i>
                </span>
              </div>
            </div>
            <div
              class="buy"
              @click.stop="
                $router.push({
                  path: 'select_cinema',
                  query: { movie_id: item.movie_id },
                })
              "
            >
              购票
            </div>
          </div>
        </div>
        <!-- 电影列表结束 -->
      </div>
      <!-- 热映列表结束 -->
      <!-- 待映列表开始 -->
      <div  class="panel">
        <div  class="header">
          <span  class="blue-name">即将上映</span
          >
          <span @click.stop="$router.push({path:'movie',query:{hotMovie:0}})"  class="more">全部{{comingMovies.length}}部 <span  class="icon-more"></span
          ></span>
        </div>
        <div  class="body">
          <div  class="item" v-for="item in comingMovies.slice(0,6)">
            <img
              @click.stop="$router.push({path:'movie_detail',query:{movie_id:item.movie_id}})"
              :src="item.poster"
              alt=""
            />
            <div  style="position: relative;">
              <div  class="peopleNumber">
                <!----><span  class="number">暂无想看</span>
              </div>
            </div>
            <div  class="presell">
              <div  class="name ellipsis">{{item.name}}</div>
              <div  class="info">
                <span  class="date">{{(new Date(item.public_date).getMonth()+1)+"月"+new Date(item.public_date).getDate()+"日"}}</span>
                <span  class="btn" @click.stop="$router.push({path:'select_cinema',query:{movie_id:item.movie_id}})">预售</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 待映列表结束 -->
    </div>
    <!-- 首页电影列表结束 -->
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/tabbar/Tabbar.vue';
import instance from '@/api/instance';
export default {
  name: 'HomeView',
  created() {
    // 请求首页需要渲染的数据的地方
    instance.get('/api/getMovieList').then((res) => {
      // console.log(res.data);
      let hotMovies = []; // 正在热映的电影列表
      let comingMovies = []; // 即将上映的电影列表
      res.data.forEach((item) => {
        // 根据日期对电影进行归类
        // 待映
        if (new Date(item.public_date) - new Date() > 0) {
          comingMovies.push(item);
        } else {
          hotMovies.push(item);
        }
      });
      // console.log("热映数据：",hotMovies);
      // console.log("待映数据：",comingMovies);
      this.hotMovies = hotMovies.sort((a, b) => b.score - a.score);
      this.comingMovies = comingMovies;
    });
  },
  // 页面元素挂载到浏览器的时候
  mounted(){
    window.addEventListener("scroll",(e)=>{
      let scrollTop = e.srcElement.scrollingElement.scrollTop;
      if(scrollTop > 30){
        this.activeHeader = true;
      }else{
        this.activeHeader = false;
      }
      // console.log(e.srcElement.scrollingElement.scrollTop);
    })
  },
  data() {
    return {
      activeHeader:false,
      bool: false,
      hotMovies: [],
      comingMovies: [],
    };
  },
  components: {
    Tabbar,
  },
  methods: {
    goToHotMovie: function () {
      this.$router.push({
        path: 'movie',
        query: {
          hotMovie:1
        },
      });
    },
    goToSearch: function () {
      this.$router.push({
        path: 'search_all',
      });
    },
    goTo: function (id) {
      this.$router.push({
        path: 'movie_detail',
        query: {
          movie_id: id,
        },
      });
      // $router => 相当于router对象,提供路由跳转需要的相关方法
      // $route  => 提供路由的参数
      // console.log(this.$router);
      // console.log(this.$route);
      // // 带查询参数，变成 /register?plan=private
      // router.push({ path: 'register', query: { plan: 'private' }})
      // this.$router.go(-1);
      // this.$router.replace({
      //   path:"/cinema",
      //   query:{
      //     movieId:3
      //   }
      // })
      // this.$router.push({
      //   path:"/cinema",
      //   query:{
      //     movieId:3
      //   }
      // })
    },
  },
};
</script>
<style scoped>

.on{
  background-color: #dd2727;
  transition: all .2s;
}
.main {
  position: relative;
  width: 100%;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.8rem;
  top: -0.25rem;
  background-color: #fff;
  z-index: 998;
}
.panel {
  font-size: 0.3125rem;
  padding: 0.1rem 0.25rem;
  border-bottom: 0.08rem solid #f5f5f5;
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.125rem 0.2rem;
}
.blue-name{
    flex: 1;
    color: #2d98f3;
    font-weight: 600;
}
.red-name {
  flex: 1;
  color: #dd2727;
  font-weight: 600;
}
.more {
  flex: 1;
  text-align: right;
  vertical-align: middle;
  font-size: 0.25rem;
}
.body {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 33.33%;
  padding: 0.125rem;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.item .peopleNumber{
  color: #ffb400;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 0.08rem;
    height: 0.4rem;
    background-color: rgba(0,0,0,.4);
    font-size: .25rem;
    box-sizing: border-box;
}
.item .presell{
  height: 1rem;
    width: 100%;
    font-size: .25rem;
}
  .item .presell .info {
      width: 100%;
      height: 0.6rem;
      font-size: .25rem;
      font-weight: lighter;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      text-align: center;
  }
  .item .presell .info .date {
    flex: 2;
  }
  .presell .info .btn {
    text-align: center;
    font-size: .25rem;
    -ms-flex: 1;
    flex: 1;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 0.12rem 0;
    background-color: #2d98f3;
    border-radius: 0.2rem;
    box-shadow: 0.02rem 0.02rem 0.08rem #2d98f3;
}
.presell .name {
    font-weight: 600;
    font-size: .25rem;
    padding: 0.1rem 0;
    width: 100%;
}
.body .item img {
  width: 100%;
  vertical-align: bottom;
}
.describe {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 0.08rem;
  height: 0.4rem;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.4);
}
.describe .name {
  color: #fff;
  font-size: 0.25rem;
  -ms-flex: 6;
  flex: 6;
  box-sizing: border-box;
  width: 100%;
  font-weight: 600;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buy {
  height: 0.6rem;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.25rem;
  background-color: #dd2727;
  color: #fff;
}
.describe .score {
  color: #ffb400;
  -ms-flex: 2;
  flex: 2;
  font-family: PingFangSC-Regular, Hiragino Sans GB, sans-serif;
  font-weight: 700;
}
.score .integer {
  font-size: 0.3rem;
}
.score .fraction {
  font-size: 0.25rem;
}

.big {
  font-size: 100px !important;
}
.red {
  width: 300px;
  height: 300px;
  font-size: 20px;
  background-color: red;
}

.swiper-container {
  width: 100%;
  height: 3rem;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.swiper-container img {
  width: 100%;
  height: 100%;
}
.search-header {
  font-size: 0.3125rem;
  color: white;
  position: fixed;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.location {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.0125rem solid #f1f1f1;
  border-radius: 0.2rem;
  text-align: center;
  padding: 0.1rem 0.18rem;
  color: #fff;
  background-color: hsla(0, 0%, 100%, 0.1);
  font-size: 0.25rem;
}
.search {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.0125rem solid #f1f1f1;
  border-radius: 0.3125rem;
  padding: 0.1rem 0.125rem;
  background-color: #fff;
}
.icon-search {
  color: black;
  font-size: 0.375rem;
}
.search input {
  border: none;
  outline: none;
  font-size: 0.3rem;
  margin-left: 0.125rem;
}
.date {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.6rem;
  height: 0.6rem;
  border: 0.0125rem solid #f1f1f1;
  border-radius: 0.425rem;
  background-color: hsla(0, 0%, 100%, 0.1);
}
.calendar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 76%;
  height: 76%;
  background: url()
    no-repeat;
  background-size: cover;
}
.calendar .day {
  position: relative;
  top: 0.45em;
  color: #fff;
  font-size: 0.6em;
}
</style>
